.TextCard,
.InsightCard {
    .handle {
        position: absolute;
        z-index: var(--z-raised);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        height: 100%;
        pointer-events: none;

        &.horizontal {
            svg {
                transform: rotate(90deg) translateX(0.75rem);
            }
        }

        &.vertical {
            flex-direction: column;

            svg {
                transform: translateX(0.5rem);
            }
        }

        &.corner {
            justify-content: flex-end;

            svg {
                transform: translate(0.5rem, 0.5rem);
            }
        }
    }
}

.CardMeta {
    position: relative;
    z-index: var(--z-raised); // Elevate above viz
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    max-height: calc(100% - 2rem);
    background: var(--color-bg-surface-primary);
    border-radius: var(--radius);

    h5 {
        margin-bottom: 0;
        overflow: hidden;
        line-height: 1rem;
        color: var(--color-text-secondary);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    h4 {
        height: 1.5em;
        margin-bottom: 0.125rem;
        overflow: hidden;
        font-size: 1rem;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .CardMeta__primary {
        display: flex;
        width: 100%;
        padding: 1rem;
    }

    .CardMeta__divider {
        height: 1px;
        margin: 0 1rem;
        background: var(--color-border-primary);
        opacity: 0;
        transition: opacity 200ms ease;
    }

    .CardMeta__details {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        max-height: 24rem;
        margin-top: -1px; // To cause overlap with the divider when closed
        overflow-y: auto;
        background: var(--color-bg-surface-primary);
        border-bottom-width: 1px;
        transition:
            box-shadow 200ms ease,
            height 200ms ease,
            margin 200ms ease;

        .CardMeta__details__content {
            overflow-y: auto;
            pointer-events: none;
        }
    }

    &.CardMeta--details-shown {
        .CardMeta__details {
            margin-top: 0;
            box-shadow: var(--shadow-elevation-3000);

            .CardMeta__details__content {
                pointer-events: all;
                opacity: 1;
            }
        }

        .CardMeta__divider {
            opacity: 1;
        }
    }
}

.CardMeta__ribbon {
    flex-shrink: 0;
    align-self: stretch;
    width: 0.375rem;
    margin: 0 0.75rem 0 -0.25rem;
    background: var(--color-text-secondary); // Just a fallback value in case there's some unrecognized value
    border-radius: var(--radius);

    &.blue {
        background: var(--blue);
    }

    &.purple {
        background: var(--purple);
    }

    &.green {
        background: var(--green);
    }

    &.black {
        background: var(--black);
    }
}

.CardMeta__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: fit-content;
    min-height: 2rem;

    > * {
        max-width: 100%; // Make sure that horizontal overflow is capped, so that ellipsis on insight name works
    }
}

.CardMeta__top {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
    height: 1.5rem;

    .LemonButton {
        height: 1.75rem;
    }
}

.CardMeta__controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
